<template>
    <div>
        <div ref="chart1" style="width:600px;height:500px;"></div>
    </div>
</template>

<script lang="ts" setup>
import {inject,ref, onMounted } from 'vue';
import * as echarts from 'echarts'
import $http from '@/http'
const chart1=ref()
const dishNum=ref(0)
const orderNum=ref(0)
onMounted(async()=>{
   await getData();
    initChart()
})
const getData=async ()=>{
    let res1=await $http.dishApi.countAll()
    //console.log(res1)
    dishNum.value=res1.data.total
    let res2=await $http.orderApi.countAll()
   // console.log(res2)
    orderNum.value=res2.data.total
}
const initChart=()=>{
    let myChart=echarts.init(chart1.value);
    let option1={
        title:{
            text:'菜品和订单'
        },
        tooltip:{},
        legend:{
            data:['数量']
        },
        xAxis:{
            data:['菜品','订单']
        },
        yAxis:{},
        series:[
            {
                name:'数量',
                type:'bar',
                data:[dishNum.value,orderNum.value]
            }
        ]
    };
    myChart.setOption(option1)
}

</script>

<style lang="scss" scoped>

</style>

<style lang="scss">

</style>